@import 'base.less' ;

// 设置变量根字号 3.75vw
@vm:3.75vw;
@color:#fb7299;

header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: (84 / @vm);
    background-color: #fff;

    // top
    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        height: (44 / @vm);
        padding-left: (18 / @vm);
        padding-right: (12 / @vm);
        // background-color: pink;

        .left {
            .iconfont {
                font-size: (28 / @vm);
                color: @color;
            }
        }
        .right {
            display: flex;
            .iconfont {
                color:#ccc;
            }
            .login {
                width: (24 / @vm);
                height: (24 / @vm);
                margin-left: (24 / @vm);
            }
            .download {
                width: (72 / @vm);
                height: (24 / @vm);
                margin-left: (24 / @vm);
            }
        }
    }

    // bottom
    .bottom {
        display: flex;
        justify-content: space-between;

        height: (40 / @vm);
        border-bottom: 1px solid #eee;

        .tab {
            ul {
                display: flex;
                li {
                    padding: 0 (16 / @vm);
                     
                    a {
                        display: block;
                        height: (38 / @vm);
                        line-height: (38 / @vm);
                        font-size: (14 / @vm);
                        &.active {
                            color: @color;
                            border-bottom: 2px solid @color;
                        }
                    }
                }
            }
        }

        .more {
            a {
                display: block;
                width: (40 / @vm);
                height: (40 / @vm);
                text-align: center;
                line-height: (40 / @vm);
                color: #ccc;
    
                .iconfont {
                    font-size: (22 / @vm);
                }
            }
        }
    }
}

// 视频内容区域
.video-content {
    padding: (84/ @vm) (5 / @vm) 0;
    .video_list {
       display: flex;
       flex-wrap: wrap;
       a {
           width: 50%;
           padding: (8 / @vm) (5 / @vm);
           font-size: (12 /@vm);

           .txt {
               margin-top: (5 / @vm);
           }

           .pic {
              position: relative;

            .count {
                position: absolute;
                left: 0;
                bottom: 0;

                display: flex;
                justify-content: space-between;
       
                width: 100%;
                padding: (8 / @vm);
                background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
                color: #fff;
                i {
                    vertical-align: middle;
                }
            }
           }
       }
    }

}